<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 状态栏 -->
    <div class="flex justify-between items-center px-6 py-3 bg-white">
        <span class="text-sm font-medium text-gray-800">9:41</span>
        <div class="flex items-center space-x-1 text-gray-800">
            <i class="fas fa-signal text-sm"></i>
            <i class="fas fa-wifi text-sm"></i>
            <i class="fas fa-battery-three-quarters text-sm"></i>
        </div>
    </div>

    <!-- 头部用户信息 -->
    <div class="bg-gradient-to-br from-purple-500 via-pink-500 to-red-400 px-6 py-8">
        <div class="flex items-center justify-between text-white mb-6">
            <i class="fas fa-arrow-left text-xl"></i>
            <h1 class="text-xl font-bold">个人中心</h1>
            <i class="fas fa-cog text-xl"></i>
        </div>
        
        <div class="text-center">
            <div class="w-20 h-20 bg-white rounded-full mx-auto mb-4 p-1">
                <img src="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?w=80&h=80&fit=crop&crop=face" 
                     alt="头像" class="w-full h-full rounded-full object-cover">
            </div>
            <h2 class="text-xl font-bold text-white mb-1">小明</h2>
            <p class="text-white/80 mb-4">7岁 · 学习了127个单词</p>
            
            <div class="flex justify-center space-x-6">
                <div class="text-center">
                    <div class="text-lg font-bold">15</div>
                    <div class="text-white/80 text-sm">连续天数</div>
                </div>
                <div class="text-center">
                    <div class="text-lg font-bold">2580</div>
                    <div class="text-white/80 text-sm">总积分</div>
                </div>
                <div class="text-center">
                    <div class="text-lg font-bold">8</div>
                    <div class="text-white/80 text-sm">徽章数</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="px-6 py-6 pb-20">
        <!-- 学习统计卡片 -->
        <div class="bg-white rounded-2xl p-6 mb-6 shadow-sm">
            <h3 class="font-semibold text-gray-800 mb-4">本月学习</h3>
            <div class="grid grid-cols-3 gap-4">
                <div class="text-center">
                    <div class="w-12 h-12 bg-blue-100 rounded-xl mx-auto mb-2 flex items-center justify-center">
                        <i class="fas fa-book text-blue-500"></i>
                    </div>
                    <div class="text-lg font-bold text-gray-800">85</div>
                    <div class="text-gray-500 text-sm">新学单词</div>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 bg-green-100 rounded-xl mx-auto mb-2 flex items-center justify-center">
                        <i class="fas fa-gamepad text-green-500"></i>
                    </div>
                    <div class="text-lg font-bold text-gray-800">42</div>
                    <div class="text-gray-500 text-sm">游戏次数</div>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 bg-purple-100 rounded-xl mx-auto mb-2 flex items-center justify-center">
                        <i class="fas fa-clock text-purple-500"></i>
                    </div>
                    <div class="text-lg font-bold text-gray-800">8.5</div>
                    <div class="text-gray-500 text-sm">学习小时</div>
                </div>
            </div>
        </div>

        <!-- 功能菜单 -->
        <div class="space-y-4">
            <!-- 学习设置 -->
            <div class="bg-white rounded-2xl shadow-sm">
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 mb-3">学习设置</h3>
                </div>
                <div class="space-y-0">
                    <div class="flex items-center justify-between px-4 py-3 border-t border-gray-100">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-bell text-blue-500"></i>
                            <span class="text-gray-800">学习提醒</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="text-gray-500 text-sm">每天 19:00</span>
                            <i class="fas fa-chevron-right text-gray-400"></i>
                        </div>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3 border-t border-gray-100">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-target text-green-500"></i>
                            <span class="text-gray-800">每日目标</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="text-gray-500 text-sm">10个单词</span>
                            <i class="fas fa-chevron-right text-gray-400"></i>
                        </div>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3 border-t border-gray-100">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-volume-up text-purple-500"></i>
                            <span class="text-gray-800">语音设置</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="text-gray-500 text-sm">美式发音</span>
                            <i class="fas fa-chevron-right text-gray-400"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 家长控制 -->
            <div class="bg-white rounded-2xl shadow-sm">
                <div class="p-4">
                    <h3 class="font-semibold text-gray-800 mb-3">家长控制</h3>
                </div>
                <div class="space-y-0">
                    <div class="flex items-center justify-between px-4 py-3 border-t border-gray-100">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-shield-alt text-orange-500"></i>
                            <span class="text-gray-800">使用时长限制</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="text-gray-500 text-sm">30分钟/天</span>
                            <i class="fas fa-chevron-right text-gray-400"></i>
                        </div>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3 border-t border-gray-100">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-chart-bar text-blue-500"></i>
                            <span class="text-gray-800">学习报告</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="text-gray-500 text-sm">每周发送</span>
                            <i class="fas fa-chevron-right text-gray-400"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 其他功能 -->
            <div class="bg-white rounded-2xl shadow-sm">
                <div class="space-y-0">
                    <div class="flex items-center justify-between px-4 py-3">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-star text-yellow-500"></i>
                            <span class="text-gray-800">我的收藏</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="text-gray-500 text-sm">23个单词</span>
                            <i class="fas fa-chevron-right text-gray-400"></i>
                        </div>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3 border-t border-gray-100">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-download text-green-500"></i>
                            <span class="text-gray-800">离线下载</span>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span class="text-gray-500 text-sm">管理</span>
                            <i class="fas fa-chevron-right text-gray-400"></i>
                        </div>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3 border-t border-gray-100">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-share-alt text-blue-500"></i>
                            <span class="text-gray-800">分享给朋友</span>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3 border-t border-gray-100">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-question-circle text-purple-500"></i>
                            <span class="text-gray-800">帮助与反馈</span>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>
            </div>

            <!-- 关于 -->
            <div class="bg-white rounded-2xl shadow-sm">
                <div class="space-y-0">
                    <div class="flex items-center justify-between px-4 py-3">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-info-circle text-gray-500"></i>
                            <span class="text-gray-800">关于我们</span>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                    <div class="flex items-center justify-between px-4 py-3 border-t border-gray-100">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-shield-alt text-gray-500"></i>
                            <span class="text-gray-800">隐私政策</span>
                        </div>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around py-3">
            <div class="text-center">
                <i class="fas fa-home text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">首页</span>
            </div>
            <div class="text-center">
                <i class="fas fa-book text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">学习</span>
            </div>
            <div class="text-center">
                <i class="fas fa-gamepad text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">游戏</span>
            </div>
            <div class="text-center">
                <i class="fas fa-chart-line text-gray-400 text-xl mb-1"></i>
                <span class="text-gray-400 text-xs">进度</span>
            </div>
            <div class="text-center">
                <i class="fas fa-user text-blue-500 text-xl mb-1"></i>
                <span class="text-blue-500 text-xs font-medium">我的</span>
            </div>
        </div>
    </div>
</body>
</html>